<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="btn" style="width:50px; height:50px; border:1px solid black"></div>
<div class="btn" style="width:50px; height:50px; border:1px solid black"></div>
<div class="btn" style="width:50px; height:50px; border:1px solid black"></div>
<div class="btn" style="width:50px; height:50px; border:1px solid black"></div>
<div class="btn" style="width:50px; height:50px; border:1px solid black"></div>

<div class="box" onclick='BoxClick()'>
    <h2 onclick='hclick(event)'>事件冒泡</h2>
</div>

<script>
    const Obtn = document.querySelectorAll('#btn')[0] // 获取的是一个NodeList, 里面是获取到的所有的满足条件的.
    const ObtnC = document.querySelector('.btn')
    const params = prompt('请输入div的宽,高, 用, 隔开')
    // Es6的[], 可以解构赋值， 也可以交换[a,b] = [b,a]互相交换位置
    const [width, height] = params.split(',')
    console.log([width, height]);
    // trim() 删除字符串里面的所有空格
    // str.replace(/\s+/g, '')  // 将str中的所有空格都删除
    width ? ObtnC.style.width = width.trim() + 'px' : ''
    height ? ObtnC.style.height = height.trim() + 'px' : ''

    function hclick(event) {
        event.stopPropagation()

        event.stopPropagation()
        console.log('h2Click')
    }

    function BoxClick(event) {
        console.log('boxcLick');
    }

    console.dir(document);

    console.log(Obtn);
    console.log(ObtnC);

    Obtn.addEventListener('click', (event) => {
        console.dir(event)
        Obtn.style.width = 100 + 'px'
    })

    Obtn.addEventListener('click', function () {
        Obtn.style.height = 120 + 'px'
    })

    Obtn.removeEventListener('click', event)
</script>
</body>
</html>
